<route lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '任务单列表',
    enablePullDownRefresh: true,
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <page-meta :root-font-size="setting.rootFontSize"></page-meta>
  <view style="min-height: 100vh; padding: 0 20rpx; margin-top: 20rpx; background-color: #f2f2f1">
    <wd-navbar fixed placeholder title="列表" left-arrow safeAreaInsetTop>
      <template #left>
        <wd-icon name="thin-arrow-left" size="22px" color="white" @click="goBack"></wd-icon>
      </template>
      <!-- <template #right>
        <wd-icon name="qrcode" size="22px" color="white" @click="scanCode"></wd-icon>
      </template> -->
    </wd-navbar>
    <template v-for="item in dataList" :key="item.id">
      <card :_D="item"></card>
    </template>
    <wd-loadmore :state="loadMore" finishedText="没有更多了" @reload="handleSearch()"></wd-loadmore>
  </view>
</template>

<script lang="ts" setup name="sign">
import { useSetting } from '@/stores/setting';
import card from './component/card.vue';
import { getRdDemandPage } from '@/service/pm-task';
const dataList = ref([]);
const setting = useSetting();
const page = ref(1);
const size = ref(20);
const loading = ref(false);
const loadMore = ref<any>('finished');

const getData = () => {
  uni.showLoading();
  loading.value = true;
  loadMore.value = 'loading';
  getRdDemandPage({
    current: page.value,
    descs: 'create_time',
    size: size.value,
  })
    .then((res) => {
      if (res.code !== 0) {
        uni.showToast({
          title: res.msg,
          icon: 'none',
        });
        return;
      }
      dataList.value = dataList.value.concat(res.data.records);
      if (res.data.records.length === size.value) {
        loadMore.value = 'loadEnd';
      } else {
        loadMore.value = 'finished';
      }
    })
    .catch((err) => {
      loadMore.value = 'loading';
      uni.showToast({
        title: err.data?.msg || err.msg,
        icon: 'none',
      });
    })
    .finally(() => {
      uni.hideLoading();
      loading.value = false;
      uni.stopPullDownRefresh();
    });
};

const goBack = () => {
  uni.navigateBack();
};

onMounted(() => {
  getData();
});

const hintScanHandle = () => {
  uni.showModal({
    title: '提示',
    content: '请扫描正确单号二维码',
    showCancel: false,
    success: ({ confirm, cancel }) => {},
  });
};

const scanCode = () => {
  uni.scanCode({
    success: function (res) {
      console.log('条码类型：' + res.scanType);
      console.log('条码内容：' + res.result);

      const code = res.result;
      // 判断是否是需求单的编码
      if (code.indexOf('pm_scan') == 0) {
        const s = code.replace('pm_scan', '');

        /**
         *  const j = {
              id: form.id,
              taskCode: form.taskCode,
              demandCode: form.demandCode,
              page: '/pages/pm/task/detail',
            };
        */
        const o = JSON.parse(s);
        if (o.sianApp == 'pm_task') {
          uni.navigateTo({
            url: '/pages/pm/task/detail?params=' + s,
          });
        } else {
          hintScanHandle();
        }
      } else {
        hintScanHandle();
      }
    },
  });
};

onPullDownRefresh(() => {
  //重新获取
  if (loading.value) return;
  dataList.value = [];
  page.value = 1;
  getData();
});
onReachBottom(() => {
  if (loading.value) return;
  // page.value++;
  // getData();
  if (loadMore.value === 'loadEnd') {
    page.value++;
    getData();
  }
});

const handleSearch = () => {
  dataList.value = [];
  page.value = 1;
};
</script>

<style lang="scss" scoped>
$padding: 30rpx;

.canvas-box {
  .canvas {
    height: 300rpx;
    transition: height 0.3s;
  }

  .btns {
    margin-top: 10rpx;
    transition: transform 0.3s;

    .btn {
      width: auto;
      height: 50rpx;
    }
  }
}

.full-screen {
  flex-direction: row;
  height: calc(100vh - 88rpx);

  .canvas {
    width: calc(100% - 100rpx);
    height: 100%;
    margin-left: 100rpx;
  }

  .btns {
    position: absolute;
    align-items: center;
    width: calc(100vh - (88rpx + $padding * 2));
    height: 100rpx;
    transform: translate(100rpx, 0) rotate(90deg);
    transform-origin: top left;

    .btn-box {
      flex-direction: row;
    }
  }
}
</style>
